<template>
  <div>
    <div class="row-header" :style="{'overflow-x': $store.state.app.screenWidth<590?'scroll':'none'}">
      <!--查询条件-->
      <el-tabs type="border-card" v-model="activeTab" :style="{'width': $store.state.app.screenWidth<590?'590px':'99%', 'margin': '0 0.5%'}" @tab-click="handleTabsClick">
        <el-tab-pane label="高级查询" name="tab1">
          <el-form :model="form" :rules="rules" ref="form" label-width="50px" style="width: 100%; margin-top: 20px;" :inline="true">
            <el-form-item label=" " prop="loginName">
              <el-autocomplete class="inline-input" size="small" v-model="form.loginName"
                               :fetch-suggestions="querySearch" :trigger-on-focus="false" :disabled="formDisabled"
                               @select="handleSelect" placeholder="请输入代理账号" clearable>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label=" " prop="passage">
              <el-select :disabled="formDisabled" filterable v-model="form.passage" placeholder="请选择通道">
                <el-option
                  v-for="item in passageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" " prop="startNo">
              <el-input placeholder="请输入起始卡号" :disabled="formDisabled" v-model.trim="form.startNo" ref="startNo" style="width: 200px" maxlength="20"></el-input>
              <span style="margin: 0 10px;">--</span>
              <el-input placeholder="请输入结束卡号" :disabled="formDisabled" v-model.trim="form.endNo" ref="endNo" style="width: 200px" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="balancePackage">
              <el-select filterable :disabled="formDisabled" v-model="form.balancePackage" placeholder="请选择余额套餐" >
                <el-option
                  v-for="item in balancePackageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" " prop="mealType">
              <el-select :disabled="formDisabled" filterable v-model="form.mealType" placeholder="请选择套餐大类" >
                <el-option
                  v-for="item in mealTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" " prop="balanceMin">
              <el-input placeholder="请输入余额区间起始金额" :disabled="formDisabled" v-model="form.balanceMin" ref="balanceMin" style="width: 200px;"></el-input>
              <span style="margin: 0 10px;">--</span>
              <el-input placeholder="请输入余额区间结束金额" :disabled="formDisabled" v-model="form.balanceMax" ref="balanceMax" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="dateRange">
              <el-date-picker
                :disabled="formDisabled"
                v-model="form.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="激活时间起始日期"
                end-placeholder="激活时间结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="不规则卡号" prop="cardsNo" label-width="100px">
              <button type="button" :disabled="formDisabled" class="btn_look" v-show="form.cardsNo" @click="dialogFormVisible = true;propType = 'cardNo';form.cardsIccid=''" :style="{'cursor':formDisabled?'not-allowed':'pointer'}"><i class="el-icon-view"></i> 点击查看卡号</button>
              <button type="button" :disabled="formDisabled" class="btn_input" v-show="!form.cardsNo" @click=" dialogFormVisible = true;propType = 'cardNo';form.cardsIccid=''" :style="{'cursor':formDisabled?'not-allowed':'pointer'}"><i class="el-icon-edit-outline"></i> 点击输入卡号</button>
            </el-form-item>
            <el-form-item label="不规则iccid" prop="cardsIccid" label-width="100px">
              <button type="button" :disabled="formDisabled" class="btn_look" v-show="form.cardsIccid" @click="dialogFormVisible = true;propType = 'iccid';form.cardsNo=''" :style="{'cursor':formDisabled?'not-allowed':'pointer'}"><i class="el-icon-view"></i> 点击查看iccid</button>
              <button type="button" :disabled="formDisabled" class="btn_input" v-show="!form.cardsIccid" @click=" dialogFormVisible = true;propType = 'iccid';form.cardsNo=''" :style="{'cursor':formDisabled?'not-allowed':'pointer'}"><i class="el-icon-edit-outline"></i> 点击输入iccid</button>
            </el-form-item>
            <el-form-item label="卡状态" prop="cardStatus" label-width="80px">
              <el-checkbox-group :disabled="formDisabled" v-model="form.cardStatus" >
                <el-checkbox v-for="item in cardStatusOptions" :label="item.label" :key="item.value">{{item.value}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div class="row-form-btn">
            <el-button type="warning" size="mini" :plain="!form.isAllCard?true:false" @click="form.isAllCard=true,innitData()" :disabled="this.form.isAllCard" v-show="form.userId&&form.loginName">全部卡</el-button>
            <el-button type="success" size="mini" :plain="form.isAllCard?true:false" @click="form.isAllCard=false,innitData()" :disabled="!this.form.isAllCard" v-show="form.userId&&form.loginName">直属卡</el-button>
            <el-button type="primary"  size="mini" icon="el-icon-search" @click="page = 1;innitData()">查询</el-button>
            <el-button type="shenda"  size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
          </div>
        </el-tab-pane >
        <el-tab-pane label="批量上传卡号" name="tab2">
          <el-row class="row_exl">
            <div style="width: 10%;display: inline-block"><el-button type="primary"  size="small" @click="getExlFile('cardNo')">下载导入摸板</el-button></div>
            <div style="width: 30%;display: inline-block">
              <el-button type="primary"  size="small" >批量上传卡号</el-button>
              <input type="file" id="fileCardNo" ref="fileCardNo" @change="uploadExlFile($event,'cardNo')" class="uploadClass" />
              <span style="margin: 0 10px">{{fileName}}</span>
              <el-button type="text" @click="resetForm('form')" v-show="fileName"><i class="el-icon-error"></i>清除</el-button>
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="批量上传iccid" name="tab3">
          <el-row class="row_exl">
            <div style="width: 10%;display: inline-block"><el-button type="primary"  size="small" @click="getExlFile('iccid')">下载导入摸板</el-button></div>
            <div style="width: 30%;display: inline-block">
              <el-button type="primary"  size="small" >批量上传iccid</el-button>
              <input type="file" id="fileIccid" ref="fileIccid" @change="uploadExlFile($event,'iccid')" class="uploadClass" />
              <span style="margin: 0 10px">{{iccidFileName}}</span>
              <el-button type="text" @click="resetForm('form')" v-show="iccidFileName"><i class="el-icon-error"></i>清除</el-button>
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="手动更新日流量" name="tab4">
          <el-row class="row_exl">
            <div style="width: 10%;display: inline-block"><el-button type="primary"  size="small" @click="getExlFile('iccid')">下载导入摸板</el-button></div>
            <div style="width: 30%;display: inline-block">
              <el-button type="primary"  size="small" >批量上传日流量</el-button>
              <input type="file" id="fileFlow" ref="fileFlow" @change="uploadExlFile($event,'dayFlow')" class="uploadClass" />
              <span style="margin: 0 10px">{{iccidFileName}}</span>
              <el-button type="text" @click="resetForm('form')" v-show="iccidFileName"><i class="el-icon-error"></i>清除</el-button>
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="手动更新月流量" name="tab5">
          <el-row class="row_exl">
            <div style="width: 10%;display: inline-block"><el-button type="primary"  size="small" @click="getExlFile('iccid')">下载导入摸板</el-button></div>
            <div style="width: 30%;display: inline-block">
              <el-button type="primary"  size="small" >批量上传月流量</el-button>
              <input type="file" id="fileFlow" ref="fileFlow" @change="uploadExlFile($event,'monthFlow')" class="uploadClass" />
              <span style="margin: 0 10px">{{iccidFileName}}</span>
              <el-button type="text" @click="resetForm('form')" v-show="iccidFileName"><i class="el-icon-error"></i>清除</el-button>
            </div>
          </el-row>
        </el-tab-pane>		
      </el-tabs>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="small" @click="refreshPage"><i class="el-icon-refresh"></i>刷新页面</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('导出二维码信息','QR_CODE')">导出二维码信息</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量禁用卡','DISABLED')">批量禁用卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量解禁卡','REMOVE_DISABLED')">批量解禁卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量开机','BATCH_OPEN_CARD')">批量开机</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('设置实名','REALNAME')">设置实名</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('取消实名','REMOVE_REALNAME')">取消实名</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量设置套餐','SETMEAL')">批量设置套餐</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量设置余额套餐','SET_BALANCE_HEAD')">批量设置余额套餐</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量取消余额套餐','CANCEL_BALANCE_HEAD')">批量取消余额套餐</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量设置备用卡','RESERVE_CARDS')">批量设置备用卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量取消设置备用卡','REMOVE_RESERVE_CARDS')">批量取消设置备用卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('设置余额充值','SET_BUY_IN_AMOUNT')">设置余额充值</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('取消余额充值','REMOVE_BUY_IN_AMOUNT')">取消余额充值</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量修改余额','SET_BALANCE')">批量修改余额</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量设置换卡','CHANGE_CARD')">批量设置换卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量取消设置换卡','REMOVE_CHANGECARD')">批量取消设置换卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量回收卡','RETURN_CARD')">批量回收卡</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量赠送流量','BATCH_FREEFLOW')">批量赠送流量</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量放入回收站','RECYCLE_BIN_CARD')">批量放入回收站</el-button>
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量导出','EXPORT_CARD')">批量导出</el-button>
<!--      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量清空当前卡下全部订单数据及流量','CLEAN_ALL_CARD')">批量清空全部订单及流量</el-button>-->
<!--      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量清空当前卡下试用套餐订单数据及流量','CLEAN_TRY_CARD')">批量清空试用套餐订单及流量</el-button>-->
<!--      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="formMeal.dictOprationType='CLEAN_ALL_CARD';doSomeAct(formMeal.dictOprationType=='CLEAN_ALL_CARD'?'批量清空全部订单数据及流量':'仅批量清空试用包订订单数据及流量',formMeal.dictOprationType);">批量清空订单及流量</el-button>-->
      <el-button type="shenda" size="small" style="margin: 5px" v-preventReClick @click="doSomeAct('批量添加卡备注','REMARKS_CARD')">批量添加卡备注</el-button>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                :data="list" class="row-main-table"
                ref="table" tooltip-effect="dark"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <el-table-column prop="cardNumber" label="卡号" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="iccid" label="iccid" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="imsi" label="imsi" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="msisdn" label="msisdn" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="setMealHeadName" label="套餐组" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="balanceHeadName" label="余额组" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="accountName" label="通道名称" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="dictChannelCardStatusName" label="状态" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          background
          @current-change="changPage"
          @size-change="changSize"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          class="row-main-pager">
        </el-pagination>
      </div>
    </div>
    <!--不规则卡号 onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')" -->
    <el-dialog :title="propType=='cardNo'?'卡号':'iccid'+'（一行一个）'" :visible.sync="dialogFormVisible" width="700px" >
      <el-row v-if="propType=='cardNo'">
        <el-input type="textarea" v-model="form.cardsNo" style="width: 100%" :rows="10" placeholder="请输入卡号，每行一个" onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')"></el-input>
      </el-row>
      <el-row v-if="propType=='iccid'">
        <el-input type="textarea" v-model="form.cardsIccid" style="width: 100%" :rows="10" placeholder="请输入iccid，每行一个" onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')"></el-input>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCardsNo">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量操作弹窗 | 实名  | 换卡 | 赠送流量 -->
    <el-dialog :title="title" :visible.sync="dialogFormMealVisible" width="700px">
      <el-row style="width: 90%;margin: 10px 5%;line-height: 40px"> <span style="color: brown;font-weight: bold;font-size: 18px;">{{tipTitle}}</span></el-row>
      <el-row style="width: 80%;margin: 10px 10%;line-height: 40px">{{showText}}</el-row>
      <el-row style="width: 80%;margin: 10px 10%;line-height: 40px" v-if="formMeal.dictOprationType === 'SET_BALANCE'">当前操作为批量修改余额，<span style="color: crimson">是在原有余额基础上 <b>执行加减</b> 操作</span> </el-row>
      <el-form :model="formMeal" ref="formMeal" label-width="140px">
        <!--    批量实名    -->
        <el-form-item label="实名通道" prop="passage" v-if="formMeal.dictOprationType === 'REALNAME'" :rules="[{ required: true, message: '请选择实名通道', tigger: 'change' },]">
          <el-select filterable v-model="formMeal.passage" placeholder="请选择" style="width: 80%">
            <el-option
              v-for="item in realNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--   批量修改余额     -->
        <el-form-item label="余额" prop="balance" v-if="formMeal.dictOprationType === 'SET_BALANCE'" :rules="[{ required: true, message: '请输入要修改的余额', tigger: 'input' },{ pattern: /^(\-|\+)?\d+(\.\d{1,2})?$/, message: '请填写正确的金额,保留两位小数' }]">
          <el-input v-model="formMeal.balance" style="width:300px;"> <el-button slot="append" >元</el-button></el-input>
        </el-form-item>
        <!--    批量设置换卡      -->
        <el-form-item label="首张（金额）" prop="money" v-if="formMeal.dictOprationType === 'CHANGE_CARD'" :rules="[{ required: true, message: '请输入首张（金额）', tigger: 'blur' }, { pattern: /^([0]|[1-9][0-9]*)+(\.[0-9]{1,2})?$/, message: '请填写正确的金额,保留两位小数' }]">
          <el-input v-model="formMeal.money" ></el-input>
        </el-form-item>
        <el-form-item label="叠加（金额）" prop="amount" v-if="formMeal.dictOprationType === 'CHANGE_CARD'" :rules="[{ required: true, message: '请输入叠加（金额）', tigger: 'blur' },{ pattern: /^([0]|[1-9][0-9]*)+(\.[0-9]{1,2})?$/, message: '请填写正确的金额,保留两位小数' },]">
          <el-input v-model="formMeal.amount" ></el-input>
        </el-form-item>
        <el-form-item label="换卡原因（C端展示）" prop="note" v-if="formMeal.dictOprationType === 'CHANGE_CARD'" :rules="[{ required: true, message: '请输入换卡原因，用于C端展示', tigger: 'blur' }]">
          <el-input v-model="formMeal.note" type="textarea" maxlength="350" show-word-limit></el-input>
        </el-form-item>
        <!--   批量赠送流量   -->
        <el-form-item label="生效类型" prop="sendType" v-if="formMeal.dictOprationType === 'BATCH_FREEFLOW'" :rules="[{required: true,message:'请选择流量赠送时间',tigger:'blur'}]">
          <el-radio v-model="formMeal.sendType" label="DAY">日结</el-radio>
          <el-radio v-model="formMeal.sendType" label="MONTH">月结</el-radio>
        </el-form-item>
        <el-form-item label="赠送时间" prop="time" v-if="formMeal.dictOprationType === 'BATCH_FREEFLOW'&&formMeal.sendType==='DAY'" :rules="[{ type: 'array',required: true,message:'请选择流量赠送时间',tigger:'change'}]">
          <el-date-picker
            v-model="formMeal.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
<!--          <el-date-picker-->
<!--            v-model="formMeal.time"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            value-format="yyyy-MM-dd">-->
<!--          </el-date-picker>-->
        </el-form-item>
        <el-form-item label="生效类型" prop="type" v-if="formMeal.dictOprationType === 'BATCH_FREEFLOW'&&formMeal.sendType==='MONTH'" :rules="[{required: true,message:'请选择生效类型'}]">
          <el-radio-group v-model="formMeal.type">
            <el-radio-button label="1">本月生效</el-radio-button>
            <el-radio-button label="2">次月生效</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赠送流量" prop="num" v-if="formMeal.dictOprationType === 'BATCH_FREEFLOW'" :rules="[{required: true,message: '请填写具体赠送流量数值'},{ pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请填写正确的数值,最多两位小数' },]">
          <el-input placeholder="请输入内容" v-model="formMeal.num" class="input-with-select" style="width: 200px">
            <el-select v-model="formMeal.numType" slot="append" placeholder="请选择" style="width: 80px">
              <el-option label="GB" value="G"></el-option>
              <el-option label="MB" value="M"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="流量系数" prop="modulus" v-if="formMeal.dictOprationType === 'BATCH_FREEFLOW'" :rules="[{required: true,message: '请填写具体流量系数'},{ pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请填写正确的流量系数,保留两位小数',tigger: 'blur' },]">
          <el-input v-model="formMeal.modulus" placeholder="请输入内容" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="导出内容" prop="exportType" v-if="formMeal.dictOprationType === 'EXPORT_CARD'">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="formMeal.exportType" style="line-height: 35px;width: 200px;" >
            <el-checkbox v-for="item in exportTypeOptions" :label="item.label" :key="item.label">{{ item.value }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!--  设置卡板备注  -->
        <el-form-item label="卡备注" prop="cardRemark" v-show="formMeal.dictOprationType=='REMARKS_CARD'">
          <el-input v-model="formMeal.cardRemark" type="textarea" :rows="4" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <!--  设置卡板禁用时间  -->
        <el-form-item label="卡板禁用规则" prop="disabledType" v-if="formMeal.dictOprationType=='DISABLED'">
          <el-radio-group v-model="formMeal.disabledType">
            <el-radio label="1" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">永久禁用</el-radio>
            <el-radio label="2" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">按日期禁用</el-radio>
            <el-radio label="3" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">按时间段禁用</el-radio>
            <el-radio label="4" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">按日期内时间段禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="卡板禁用日期" prop="disabledDate" v-if="formMeal.dictOprationType=='DISABLED'&&(formMeal.disabledType=='2'||formMeal.disabledType=='4')" :rules="[{required: true,message: '请选择卡板禁用日期'}]">
          <el-date-picker
            v-model="formMeal.disabledDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="卡板禁用时间" prop="disabledTime" v-if="formMeal.dictOprationType=='DISABLED'&&(formMeal.disabledType=='3'||formMeal.disabledType=='4')" :rules="[{required: true,message: '请选择卡板禁用时间'}]">
          <el-time-picker
            is-range
            @change="changeDisabledTime"
            v-model="formMeal.disabledTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm:ss"
            value-format="HH:mm:ss">
          </el-time-picker>
        </el-form-item>
        <!--    批量清空订单与流量    -->
        <el-form-item label="清空规则" prop="disabledType" v-if="formMeal.dictOprationType=='CLEAN_TRY_CARD'||formMeal.dictOprationType=='CLEAN_ALL_CARD'">
          <el-radio-group v-model="formMeal.dictOprationType" @change="changeCleanRule">
            <el-radio label="CLEAN_TRY_CARD" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">仅清空试用包订单及流量</el-radio>
            <el-radio label="CLEAN_ALL_CARD" style="display: inline-flex;width: auto;padding:0 20px 0 0;height: 40px;line-height: 40px;justify-content: start;align-items: center;">清空全部订单及流量</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="操作备注" prop="userRemark" >
          <el-input v-model="formMeal.userRemark" type="textarea" :rows="4" ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormMealVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchSendFlow" :loading="btnLoading" v-if="formMeal.dictOprationType == 'BATCH_FREEFLOW'">确 定</el-button>
        <el-button type="primary" @click="saveFormOperation" :loading="btnLoading" v-if="formMeal.dictOprationType != 'BATCH_FREEFLOW'">确 定</el-button>
      </div>
      <!--&lt;!&ndash;二维码样式预览&ndash;&gt;-->
      <!--<el-row v-if="showOptions == 2">-->
        <!--<el-form-item label="打印备注" prop="passage" v-if="showOptions == 2">-->
        <!--<el-input type="textarea" v-model="formMeal.cardRemark" :row="4" maxlength="60" show-word-limit></el-input>-->
        <!--</el-form-item>-->
        <!--<el-col :span="6" style="height: 40px; line-height: 40px;text-align: right">打印图片预览：</el-col>-->
        <!--<el-col :span="18">-->
          <!--<div class="showBlock">-->
            <!--<div class="leftBlock">{{formMeal.cardSetMealName}}</div>-->
            <!--<div class="middleBlock">-->
              <!--<img src="../../assets/sa.png" class="saImg" />-->
            <!--</div>-->
            <!--<div class="rightBlock">-->
              <!--<el-row class="row_span1 row_span1_scale">卡号：{{cardNo}}</el-row>-->
              <!--&lt;!&ndash;<el-row class="row_span1 row_span1_scale">{{cardNo}}</el-row>&ndash;&gt;-->
              <!--<el-row class="row_span2">iccid：{{iccid}}</el-row>-->
              <!--<el-row class="row_span3">备注：{{formMeal.cardRemark}}</el-row>-->
            <!--</div>-->

          <!--</div>-->
        <!--</el-col>-->
      <!--</el-row>-->


    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogTableMealVisible" width="800px" center>
      <el-row style="width: 80%;margin: 10px 10%;line-height: 40px"> <span style="color: brown;font-weight: bold;font-size: 18px;">{{tipTitle}}</span></el-row>
      <el-row style="width: 100%;margin: 10px 0;line-height: 40px; font-size: 16px;">{{showText}}</el-row>
      <!--   套餐查询   -->
      <el-row class="row_search" v-if="formMeal.dictOprationType === 'SETMEAL'">
        <span>套餐名称:</span>
        <el-input v-model="formMealSearch.name" placeholder="请输入套餐名称" style="width: 240px; margin: 0 20px 0 10px" ></el-input>
        <span >套餐类型：</span>
        <el-select v-model="formMealSearch.type" style="width: 240px; margin: 0 20px 0 10px">
          <el-option v-for="item in formMealTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button type="primary" @click="searchMeal">查询</el-button>
      </el-row>
      <!--   余额套餐查询   -->
      <el-row class="row_search" v-if="formMeal.dictOprationType === 'SET_BALANCE_HEAD'">
        <span>余额套餐名称:</span>
        <el-input v-model="formMealSearch.balance_name" placeholder="请输入套餐名称" style="width: 240px; margin: 0 20px 0 10px" >
          <el-button slot="append" icon="el-icon-search" @click="searchBalanceMeal"></el-button>
        </el-input>
      </el-row>
      <!--   套餐列表   -->
      <el-row class="row_table" v-if="formMeal.dictOprationType==='SETMEAL'">
        <el-table :data="mealList" >
          <el-table-column property="date" label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-radio v-model="formMealSearch.selectHeadMealId" :label="scope.row.id"><span style="display: none"></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="套餐大类" width="320" align="center"></el-table-column>
          <el-table-column property="dictSetMealGroupTypeName" label="套餐类型" width="320" align="center"></el-table-column>
        </el-table>
      </el-row>
      <!--   余额套餐列表   -->
      <el-row class="row_table" v-if="formMeal.dictOprationType==='SET_BALANCE_HEAD'">
        <el-table :data="mealBalanceList" style="width: 100%">
          <el-table-column property="date" label="操作" width="50" align="center">
            <template slot-scope="scope">
              <el-radio v-model="formMealSearch.selectBalanceHeadMealId" :label="scope.row.id"><span style="display: none"></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="headName" label="余额套餐名称" align="center"></el-table-column>
        </el-table>
      </el-row>
      <el-form :model="formMeal" ref="formMeal" label-width="100px" style="margin-top: 20px">
        <el-form-item label="操作备注" prop="userRemark">
          <el-input v-model="formMeal.userRemark" type="textarea" :row="4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableMealVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFormOperation" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量赠送流量 -->
    <el-dialog :visible.sync="showFreeFlowTipDialog" title="批量赠送流量风险提示" width="50%" center>
      <div style="width: 100%;text-align: center;"><el-checkbox v-model="checked"><span style="color: crimson">{{tipTextFreeFlow}}</span> </el-checkbox></div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showFreeFlowTipDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveFormOperation" :loading="btnLoading" :disabled="!checked">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  initSetMealHeadSelect,
  initAccountSelect,
  getbalanceHeadSelect,
  cardPageByRule,
  batchCardsDisabled,
  getRealNameList,
  packageCatList,
  getbalanceHeadList,
  selectAgentList,
  cardNumberUpload,
  cardFlowsDayUpload,
  cardFlowsMonthUpload,
  batchFlowSend,
  selectAgentOne,
  bathExport,
} from '@/api/getData'
export default {
  name: "bulkOprationCenter",
  data() {
    return {
      activeTab: 'tab1',
      form: {
        passage: '',          //通道
        mealType: '',         //套餐大类
        balancePackage: '',   //余额套餐
        dateRange: '',        //激活时间区间
        cardStatus: [],       //卡状态
        startNo: '',          //起始卡号
        endNo: '',            //结束卡号
        cardsNo: '',          //不规则卡号
        cardsIccid: '',       //不规则iccid
        balanceMin: '',       //最小余额
        balanceMax: '',       //最大余额
        loginNames: '',
        userId: '',
        isAllCard: true,      //当前代理账号的全部卡or直属卡
      },
      loginNames: [],
      passageOptions: [],     //通道下拉列表
      mealTypeOptions: [],    //套餐大类列表
      balancePackageOptions: [],//套餐大类列表
      cardStatusOptions: [],  //卡状态列表
      realNameOptions: [],    //实名弹窗内下拉数据
      rules: {
        startNo: [
          {
            validator: (rule, value, callback) => {
              let endNo = this.$refs.endNo.value;
              let reg = /^([1-9][0-9]{4,19})$/;
              if (value && !reg.test(value)) callback('起始号段只能输入数字，长度在5-20位之间');
              else if (value && reg.test(value) && !endNo) callback('请输入结束号段，长度在5-20位之间');
              else if (endNo && !reg.test(endNo)) callback('结束号段只能输入数字，长度在5-20位之间');
              else if (endNo && reg.test(endNo) && !value) callback('请输入起始号段，长度在5-20位之间');
              else callback();
            }, trigger: 'blur'
          }
        ],
        balanceMin: [
          {
            validator: (rule, value, callback) => {
              let reg = /^(\-|\+)?\d+(\.\d{1,2})?$/;  //数字金额格式校验
              let balanceEnd = this.$refs.balanceMax.value;
              if (value && !reg.test(value)) callback('最小余额格式错误');
              else if (value && reg.test(value) && !balanceEnd) callback('请输入最大余额');
              else if (balanceEnd && !reg.test(balanceEnd)) callback('最大余额格式错误');
              else if (balanceEnd && reg.test(balanceEnd) && !value) callback('请输入最小余额');
              else callback();
            }, trigger: 'blur'
          }
        ],
      },
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
      propType: '',
      tableLoading: false,
      dialogFormVisible: false,
      dialogFormMealVisible: false,
      dialogTableMealVisible: false,
      btnList: [],
      formMeal: {
        passage: '',
        recharge: '1',
        money: null,
        amount: null,
        remark: '',
        userRemark: '',
        inputRemark: '',
        dictOprationType: '',
        cardSetMealName: '',
        cardRemark: '',
        balance: null,
        cardType: '',
        sendType: 'DAY',
        time: '',
        type: '',
        num: '',
        numType: 'G',
        modulus: '',
        note: '',
        exportType: ['CARDNUMBER'],
        disabledType: '1',
        disabledDate: '',
        disabledTime: '',
      },
      isIndeterminate: true,
      title: '',
      // showOptions: '',
      pagekey: '',
      showText: '',
      tipTextFreeFlow: '',
      btnLoading: false,
      cardNo: '12345678901234567890',
      iccid: '12345678901234567890',
      remark: '',
      formMealSearch:{
        type: '',
        name: '',
        balance_name: '',
        selectHeadMealId: '',
        selectBalanceHeadMealId: '',
      },
      formMealTypeOptions: [],
      mealList: [],
      mealBalanceList: [],
      fileName: '',
      iccidFileName: '',
      cardNoList: '',
      cardIccidList: '',
      iccidList: '',
      formDisabled: false,
      tipTitle: '',
      showFreeFlowTipDialog: false,
      showExportDialog: false,
      checked: false,
      checkAll: false,
      exportTypeOptions: [],
    }
  },
  mounted() {
    this.cardStatusOptions = [
      {label: 'ACTIVATE', value: '已激活'},
      {label: 'DEACTIVATED', value: '去激活'},
      {label: 'PAUSE', value: '停机'},
      {label: 'TERMINATED', value: '拆机'},
    ];
    this.formMealTypeOptions = [
      { value: '', label: '请选择' },
      { value: 'BASE_MONTH', label: '基础包+加油包（按月结算）' },
      { value: 'BASE_DAY', label: '基础包+加油包（按日结算）' },
      { value: 'SUPERPOSITION_MONTH', label: '叠加包（按月计算）' },
      { value: 'SUPERPOSITION_DAY' , label: '叠加包（按日计算）' },
      { value: 'LIMIT_SPEED' , label: '达量限速套餐(月)'},
      { value: 'LIMIT_SPEED_DAY' , label: '达量限速套餐（天）' },
      { value: 'TONGYONG_HEAD' , label: '通用套餐组' },
    ];
    this.exportTypeOptions = [
      { value: '导出卡号', label: 'CARDNUMBER'},
      { value: '导出iccid', label: 'CARDICCID'},
      { value: '导出客户账号', label: 'CARDLASTAGENT'},
      { value: '导出套餐组名称', label: 'CARDMEALNAME'},
      { value: '导出imsi', label: 'CARDIMSI'},
      { value: '导出msisdn', label: 'CARDMSISDN'},
      { value: '导出激活状态', label: 'DCCS'},
      { value: '导出本月已用', label: 'CARDUSEFLOWMONTH'},
      { value: '导出本月已用(实际)', label: 'CARDFLOWACTUSED'},
      { value: '导出套餐总量', label: 'CARDFLOWALL'},
      { value: '导出剩余流量', label: 'CARDSHENGFLOW'},
      { value: '导出余额', label: 'CARDBALANCE'},
      { value: '导出实名状态', label: 'CARDDICTUPCOMPANYREALNAME'},
      { value: '导出实名通道', label: 'CARDREALNAME'},
      { value: '导出创建时间', label: 'CARDINSERTTIME'},
      { value: '导出充值次数', label: 'CARDFREQUENCY'},
      { value: '导出一级代理', label: 'CARDAGENT'},
    ]
    this.innitMealData();
    this.innitAccountData();
    this.innitBalanceData();

  },
  methods: {
    handleCheckAllChange(val) {
      this.formMeal.exportType = [];
      if(val){
        this.exportTypeOptions.map(item=>{
          this.formMeal.exportType.push(item.label);
        })
      }
      this.isIndeterminate = false;
    },
    //模板下载
    getExlFile(val){
      if(val=='iccid'){
        window.location.href = "https://imgsd.1688iot.vip/%E6%89%B9%E9%87%8F%E6%93%8D%E4%BD%9C%E4%B8%8A%E4%BC%A0iccid%E6%A8%A1%E6%9D%BF.xlsx"
      }
      else{
        window.location.href = "https://imgsd.1688iot.vip/%E6%89%B9%E9%87%8F%E6%93%8D%E4%BD%9C%E6%A8%A1%E6%9D%BF.xlsx"
      }
    },
    //上传表格文件
    async uploadExlFile(e,dictType){
      let file = e.target.files[0];
      let i = file.name.lastIndexOf('.');
      let type = file.name.substring(i,file.name.length);
      if(type==='.xls'||type==='.xlsx'){
        this.formDisabled = true;
        let fileName = dictType=='iccid'?'iccidFileName':'fileName';
        let other =  dictType=='iccid'?'fileName':'iccidFileName';
        this[fileName] = file.name;
        this[other] = '';
        this.$refs['form'].resetFields();
        this.form.endNo = '';
        this.form.balanceMax = '';
        this.form.userId = '';
        let returnData;
        if( dictType=='dayFlow'){
          returnData = await cardFlowsDayUpload({
            file
          });
       }
	   else if(dictType=='monthFlow'){
          returnData = await cardFlowsMonthUpload({
            file
          });	   
	   }
	   else{
          returnData = await cardNumberUpload({
            file
          });
       }

        if(returnData.code === 10000){
          returnData.data.map(item=>{
            item.trim();
            if(item){
              if(dictType=='cardNo'){
                this.cardNoList += item+'\n';
              }
              else if(dictType=='iccid'){
                this.cardIccidList += item+'\n';
              }
            }
          })

          // this.cardNoList = dictType=='cardNo'?returnData.data.join('\n'):'';
          // this.cardIccidList = dictType=='iccid'?returnData.data.join('\n'):'';
          if(returnData.data&&returnData.data.length>0){
            //this.innitData()
          }
        }
      }
      else{
        this.$message.error('文件格式错误，请上传表格文件');
      }
    },
    searchMeal(){
      let _this = this;
      let type = this.formMealSearch.type===''?'':this.formMealSearch.type;
      packageCatList({
        name: this.formMealSearch.name,
        dictSetMealGroupType: type,

        page: {
          current: '1',
          size: '9999'
        }
      }).then(res=>{
        _this.dialogTableMealVisible = true;
        if(res.data.records){
          _this.mealList = res.data.records;
        }
      })
    },
    searchBalanceMeal(){
      let _this = this;
      getbalanceHeadList({
        headName: this.formMealSearch.balance_name,
        page: {
          current: '1',
          size: '9999'
        }
      }).then(res=>{
        _this.dialogTableMealVisible = true;
        if(res.data.records){
          _this.mealBalanceList = res.data.records;
        }
      })
    },
    async searchFreeFlow(batchOpratorRecord){
      let _this = this;
      let returnData = await batchFlowSend({
          batchOpratorRecord,
          page: {
            current: this.page.toString(),
            size: this.pageSize.toString()
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        });
      this.tableLoading = false;
    },
    batchSendFlow(){
      this.$refs.formMeal.validate((valid)=>{
        if(valid){
          this.showFreeFlowTipDialog = true;
        }
      })
    },
    async saveFormOperation(){
      let _this = this;
      if(_this.formMeal.dictOprationType==='SETMEAL' && !_this.formMealSearch.selectHeadMealId){
        _this.$message.error('请选择一种套餐类型后再提交数据！');
        return false;
      }
      if(_this.formMeal.dictOprationType==='SET_BALANCE_HEAD'&&!_this.formMealSearch.selectBalanceHeadMealId){
        _this.$message.error('请选择一种余额套餐类型后再提交数据！');
        return false;
      }

      if(_this.formMeal.dictOprationType==='EXPORT_CARD'&&_this.formMeal.exportType.length==0){
        _this.$message.error('请至少选择一种导出类型');
        return false;
      }
      this.$refs['formMeal'].validate((valid)=>{
        if(valid){
          this.$confirm(`${this.tipTitle}${this.showText}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let setMealHeadId = _this.form.mealType; //套餐大类
            let balanceHeadId = _this.form.balancePackage;//余额套餐
            let accountId = _this.form.passage;//通道类型
            let insertTimeStart,insertTimeEnd,disableStartDate,disableEndDate,disableStartTime,disableEndTime = '';

            if (setMealHeadId === '0') setMealHeadId = '';
            if (balanceHeadId === '0') balanceHeadId = '';
            if (accountId === '0') accountId = '';
            if (_this.form.dateRange) {//激活时间区间
              insertTimeStart = _this.form.dateRange[0];
              insertTimeEnd = _this.form.dateRange[1];
            }
            let dictOprationRule = '';
            if(_this.form.cardsNo||_this.cardNoList)dictOprationRule = 'IRREGULAR_RULE';
            if(_this.form.cardsIccid||_this.cardIccidList)dictOprationRule = 'IRREGULAR_ICCID';
            let opratorCards = '';
            if(_this.cardNoList){
              opratorCards = _this.cardNoList
            }
            else if(this.form.cardsNo){
              opratorCards = _this.form.cardsNo
            }
            else if(this.form.cardsIccid){
              opratorCards = _this.form.cardsIccid
            }
            else if(this.cardIccidList){
              opratorCards = _this.cardIccidList
            }

            if((this.formMeal.disabledType=='2'||this.formMeal.disabledType=='4')&&_this.formMeal.dictOprationType==='DISABLED'){
              disableStartDate = this.formMeal.disabledDate[0];
              disableEndDate = this.formMeal.disabledDate[1];
            }
            if((this.formMeal.disabledType=='3'||this.formMeal.disabledType=='4')&&_this.formMeal.dictOprationType==='DISABLED'){
              disableStartTime = this.formMeal.disabledTime[0];
              disableEndTime = this.formMeal.disabledTime[1];
            }
            let cardSetMealName = _this.formMeal.dictOprationType==='QR_CODE'?_this.formMeal.cardSetMealName: '';
            let cardRemark = _this.formMeal.dictOprationType==='REMARKS_CARD'?_this.formMeal.cardRemark: '';
            let realNameChannelId = _this.formMeal.dictOprationType==='REALNAME'?_this.formMeal.passage:'';
            let setMealHeadIdForUpdate = _this.formMeal.dictOprationType==='SETMEAL'?_this.formMealSearch.selectHeadMealId:'';
            let cardBalanceHeadIdForUpdate = _this.formMeal.dictOprationType==='SET_BALANCE_HEAD'?_this.formMealSearch.selectBalanceHeadMealId:'';
            let dictOpratorValue = _this.formMeal.dictOprationType==='RESERVE_CARDS'?'NOT_EXCHANGE':'';
            let commonsFlag = _this.formMeal.dictOprationType==='SET_BUY_IN_AMOUNT'?'C_YES':'';
            let balancePrice = _this.formMeal.dictOprationType==='SET_BALANCE'?_this.formMeal.balance:'';
            let cardRecycleBinLogRemark = _this.formMeal.dictOprationType==='RECYCLE_BIN_CARD'?_this.formMeal.userRemark:'';
            let note = _this.formMeal.dictOprationType==='CHANGE_CARD'?_this.formMeal.note:'';
            let exportType = _this.formMeal.dictOprationType==='EXPORT_CARD'?_this.formMeal.exportType:[];

            //批量赠送流量参数
            let mealSpec = '';
            let beginTime = '';
            let endTime = '';
            let cardFlowImaginary = '';
            let dictIsPreStorage = '';
            if(_this.formMeal.dictOprationType==='BATCH_FREEFLOW'){
              mealSpec = _this.formMeal.num;
              if(_this.formMeal.numType=='G'){
                mealSpec = parseFloat(_this.formMeal.num)*1024;
              }
              if(mealSpec==''){
                _this.$message.error('请填写赠送流量值');
                return false;
              }
              cardFlowImaginary = _this.formMeal.modulus;
              if(cardFlowImaginary==''){
                _this.$message.error('请填写流量系数');
                return false;
              }
              if(_this.formMeal.sendType==='DAY'){
                if(_this.formMeal.time.length>0){
                  beginTime = _this.formMeal.time[0];
                  endTime = _this.formMeal.time[1];
                }
                else{
                  _this.$message.error('请选择流量赠送时间');
                  return false;
                }
              }else if(_this.formMeal.sendType==='MONTH'){
                if(_this.formMeal.type==1){
                  dictIsPreStorage = 'NO'
                }
                else if(_this.formMeal.type==2){
                  dictIsPreStorage = 'YES'
                }
                else{
                  _this.$message.error('请选增赠送流量生效类型');
                  return false;
                }
              }
            }

            let reg_balance = /^(\-|\+)?\d+(\.\d{1,2})?$/;
            if(_this.formMeal.dictOprationType==='SET_BALANCE'){
              if(!_this.formMeal.balance){
                _this.$message.error('请填写余额');
                return false;
              }
              else if(!reg_balance.test(_this.formMeal.balance)){
                _this.$message.error('请修改余额');
                return false;
              }
            }
            let basePrice = _this.formMeal.dictOprationType==='CHANGE_CARD'?_this.formMeal.money: '';
            let overlyPrice = _this.formMeal.dictOprationType==='CHANGE_CARD'?_this.formMeal.amount: '';
            if(_this.formMeal.dictOprationType==='CHANGE_CARD'){
              let reg = /^([0]|[1-9][0-9]*)+(\.[0-9]{1,2})?$/;
              if(!_this.formMeal.money){
                _this.$message.error('请填写首张（金额）！');
                return false;
              }
              if(!reg.test(_this.formMeal.money)){
                _this.$message.error('请修改首张（金额）！');
                return false;
              }
              if(!_this.formMeal.amount){
                _this.$message.error('请填写叠加（金额）！');
                return false;
              }
              if(!reg.test(_this.formMeal.amount)){
                _this.$message.error('请修改叠加（金额）！');
                return false;
              }
            }
            let isAllCard = null;
            if(this.form.userId){
              isAllCard = this.form.isAllCard
            }
            let batchOpratorRecord = {
              accountId: accountId,                   //通道ID
              setMealHeadId: setMealHeadId,           //流量套餐大类ID
              balanceHeadId: balanceHeadId,           //余额套餐大类ID
              startCardNumber: _this.form.startNo,    //起始卡号
              endCardNumber: _this.form.endNo,        //起始卡号
              firstActiveDateStart: insertTimeStart,  //首次激活时间起始
              firstActiveDateEnd: insertTimeEnd,      //首次激活结束起始
              minBalance: _this.form.balanceMin,      //余额区间起始
              maxBalance: _this.form.balanceMax,      //余额区间结束
              cardStatusList: _this.form.cardStatus,  //卡状态数组类型
              dictOprationRule,                       //如果传不规则卡号则需要传他， IRREGULAR_RULE 如果传不规则iccid则需要传他， IRREGULAR_ICCID
              opratorCards: opratorCards,             //不规则卡号字符串 或者不规则Iccid
              remark: _this.formMeal.userRemark+_this.formMeal.inputRemark,     //备注
              dictOprationType: _this.formMeal.dictOprationType,                //类型
              cardSetMealName: cardSetMealName,       //当操作类型为QR_CODE时传入套餐名称
              remarks: cardRemark,                    //当操作类型为REMARKS_CARD时传入卡备注信息
              realNameChannelId: realNameChannelId,   //当操作类型为REALNAME时传入通道id
              setMealHeadIdForUpdate: setMealHeadIdForUpdate,//当操作类型为SETMEAL时传入套餐id
              cardBalanceHeadIdForUpdate: cardBalanceHeadIdForUpdate,//当操作类型为SET_BALANCE_HEAD时传入余额套餐id
              dictOpratorValue: dictOpratorValue,     //当操作类型为RESERVE_CARDS--设置备用卡时传入 NOT_EXCHANGE
              commonsFlag: commonsFlag,               //当操作类型为SET_BUY_IN_AMOUNT --余额充值时传入C_YES
              balancePrice: balancePrice,             //当操作类型为SET_BALANCE --修改余额时传入值
              basePrice: basePrice,                   //当操作类型为CHANGE_CARD --首张（金额）
              overlyPrice: overlyPrice,               //当操作类型为CHANGE_CARD --叠加（金额）
              mealSpec: mealSpec,                     //赠送多少流量        套餐规格:单位统一用MB
              beginTime: beginTime,                   //日结的时候开始时间
              endTime: endTime,                       //日结的时候结束时间
              cardFlowImaginary: cardFlowImaginary,   //流量系数
              dictIsPreStorage: dictIsPreStorage,     //是否次月生效   当月结的时候 想下月生效传YES
              cardRecycleBinLogRemark: cardRecycleBinLogRemark,     //删除卡的备注
              userId: this.form.userId,              //代理id
              isAllCard: isAllCard,                  //代理直属卡(false)或全部卡(true)  userid不为空时传true
              note,                                  //换卡原因，C端展示用
              exportType,                            //导出类型
              disableStartDate,                      //当操作类型为DISABLED时 -- 卡板开始禁用日期
              disableEndDate,                        //当操作类型为DISABLED时 -- 卡板结束禁用日期
              disableStartTime,                      //当操作类型为DISABLED时 -- 卡板开始禁用时间
              disableEndTime                         //当操作类型为DISABLED时 -- 卡板结束禁用时间
            };
            console.log(batchOpratorRecord)
            batchCardsDisabled({batchOpratorRecord},{pagekey: this.pagekey});
            let text = '数据执行中，请返回 批量操作记录 查看数据执行结果, 是否返回上一页?'
            if(_this.formMeal.dictOprationType=='EXPORT_CARD'){
              text = '数据执行中，请返回 任务中心 查看数据执行结果, 是否返回上一页?'
            }
            _this.$confirm(`${text}`, '提示', {
              confirmButtonText: '返回',
              cancelButtonText: '留在当前页',
              type: 'warning'
            }).then(() => {
              if(_this.formMeal.dictOprationType=='EXPORT_CARD'){
                _this.$router.push({
                  path: '/mission/mission'
                })
              }
              else{
                _this.$router.push({
                  // path: '/bath/batchOperationRecords'
                  path: '/special/batchOperationRecords'
                })
              }
            }).catch(() => {
              _this.btnLoading = false;
              _this.tableLoading = false;
              _this.dialogFormMealVisible = false;
              _this.dialogTableMealVisible = false;
              _this.showFreeFlowTipDialog = false;
              _this.formMeal = {
                passage: '',
                recharge: '1',
                money: null,
                amount: null,
                remark: '',
                userRemark: '',
                inputRemark: '',
                dictOprationType: '',
                cardSetMealName: '',
                cardRemark: '',
                balance: null,
                sendType: 'DAY',
                time: '',
                type: '',
                num: '',
                numType: 'G',
                modulus: '',
                note: '',
                exportType: ['CARDNUMBER'],
                disabledType: '1',
                disabledDate: '',
                disabledTime: '',
              };
              _this.innitData();
            });
          }).catch(() => {

          })
        }
      })




    },
    async doSomeAct(name,type){
      let _this = this;
      if(this.activeTab=='tab1' && !this.form.loginName && !this.form.passage && !this.form.mealType && !this.form.balancePackage && this.form.dateRange.length==0 && this.form.cardStatus.length==0 && !this.form.startNo && !this.form.endNo && !this.form.cardsNo && !this.form.cardsIccid && !this.form.balanceMin && !this.form.balanceMax && !this.form.loginNames && !this.form.balanceMax){
        this.$alert(`您暂未选择任何查询条件，已禁止进行${name}操作`, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
        return false;
      }
      if(this.activeTab=='tab2' && this.fileName==''){
        this.$alert(`您暂未上传卡号文件，已禁止进行${name}操作`, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
        return false;
      }
      this.formMeal.dictOprationType = type;
      await this.innitData();
      if(this.total === 0&&this.cardNoList.length==0&&
        this.cardIccidList==0){
        this.$alert(`当前表格内暂无数据请更换条件并查询后再执行${name}`, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
        this.tableLoading = false;
        return false;
      }
      this.pagekey = await this.$getPageKey();

      if(type=='SETMEAL' || type=='SET_BALANCE_HEAD'){
        this.formMealSearch = {
          type : '',
          name: '',
          balance_name: '',
          selectHeadMealId: '',
          selectBalanceHeadMealId: '',
        };
        if(type==='SETMEAL')this.searchMeal();
        if(type==='SET_BALANCE_HEAD')this.searchBalanceMeal();
      }
      // else if(type=='EXPORT_CARD'){
      //
      //   this.showExportDialog = true;
      // }
      else{
        if(type=='BATCH_FREEFLOW'){
          this.formMeal = {
            sendType : 'DAY',
            time: '',
            num: '',
            numType : 'G',
            modulus: '',
            type:'',
            dictOprationType: type,
            userRemark: '',
          };
        }
        this.dialogFormMealVisible = true;
      }
      this.formMeal.userRemark = '';
      this.title = name;
      // this.showOptions = status;
      let startTime = '';
      let endTime = '';
      if(this.form.dateRange){
        startTime = this.form.dateRange[0];
        endTime = this.form.dateRange[1];
      }
      let balanceMin = '';
      let balanceMax = '';
      if(this.form.balanceMin)balanceMin = this.form.balanceMin;
      if(this.form.balanceMax)balanceMax = this.form.balanceMax;
      let cardsNo = '';
      let cardsIccid = '';
      if(this.form.cardsNo)cardsNo = '已输入不规则卡号';
      if(this.form.cardsIccid)cardsIccid = '已输入不规则iccid';
      this.formMeal.inputRemark = `当前操作[ ${name} ]`;
      if(startTime&&endTime){
        this.formMeal.inputRemark += `，首次激活时间：${startTime} 至 ${endTime}`
      }
      if(balanceMin&&balanceMax){
        this.formMeal.inputRemark += `，余额区间：${balanceMin} 至 ${balanceMax}`
      }
      if(cardsNo){
        this.formMeal.inputRemark += `，${cardsNo}。`
      }
      if(cardsIccid){
        this.formMeal.inputRemark += `，${cardsIccid}。`
      }

      this.tipTitle = `※ 高风险操作 【${name}】请核对数据 ※`
      this.showText = `是否继续将当前表格内总计 ${this.total} 条数据进行 ${name} ?`
      this.tipTextFreeFlow = '我已知晓赠送流量后即将进行激活卡操作并产生扣费等相关事宜'
      if(this.formMeal.dictOprationType==='REALNAME'){
        this.realNameOptions = [];
        let returnData = await getRealNameList();
        if (returnData._result) {
          for (let item of returnData.data) {
            let obj = {};
            obj.value = item.id;
            obj.label = item.realnameName;
            this.realNameOptions.push(obj)
          }
        }
      }
    },
    refreshPage(){
      this.page = 1;
      this.innitData();
    },
    async innitData() {
      this.tableLoading = true;
      let setMealHeadId = this.form.mealType; //套餐大类
      let balanceHeadId = this.form.balancePackage;//余额套餐
      let accountId = this.form.passage;//通道类型
      let oprationStatus = this.form.operationStatus;//操作状态
      let oprationType = this.form.operationType;//操作状态
      let insertTimeStart = '';
      let insertTimeEnd = '';
      // if (setMealHeadId == '0') setMealHeadId = '';
      // if (balanceHeadId == '0') balanceHeadId = '';
      // if (accountId == '0') accountId = '';
      // if (oprationType == '0') oprationType = '';
      // if (oprationStatus == '0') oprationStatus = '';
      if (this.form.dateRange) {
        insertTimeStart = this.form.dateRange[0];
        insertTimeEnd = this.form.dateRange[1];
      }
      //不规则卡号 或 不规则iccid
      let dictOprationRule = '';
      if(this.form.cardsNo||this.cardNoList)dictOprationRule = 'IRREGULAR_RULE';
      if(this.form.cardsIccid||this.cardIccidList)dictOprationRule = 'IRREGULAR_ICCID';
      let opratorCards = '';
      if(this.cardNoList){
        opratorCards = this.cardNoList
      }
      else if(this.form.cardsNo){
        opratorCards = this.form.cardsNo
      }
      else if(this.form.cardsIccid){
        opratorCards = this.form.cardsIccid
      }
      else if(this.cardIccidList){
        opratorCards = this.cardIccidList
      }

      let isAllCard = null;
      if(this.form.userId){
        isAllCard = this.form.isAllCard
      }
      if (this.form.loginName) {
        let r = await selectAgentOne({loginName: this.form.loginName})
        if (r._result) {
          this.form.userId = r.data[0].id
        }
      }
      let batchOpratorRecord = {
        accountId: accountId,                 //通道ID
        setMealHeadId: setMealHeadId,         //流量套餐大类ID
        balanceHeadId: balanceHeadId,         //余额套餐大类ID
        startCardNumber: this.form.startNo,   //起始卡号
        endCardNumber: this.form.endNo,       //起始卡号
        firstActiveDateStart: insertTimeStart,//首次激活时间起始
        firstActiveDateEnd: insertTimeEnd,    //首次激活结束起始
        minBalance: this.form.balanceMin,     //余额区间起始
        maxBalance: this.form.balanceMax,     //余额区间结束
        cardStatusList: this.form.cardStatus, //卡状态数组类型
        dictOprationRule: dictOprationRule,   //如果传不规则卡号则需要传IRREGULAR_RULE， 如果是ICCID 传IRREGULAR_ICCID
        opratorCards: opratorCards,           //不规则卡号字符串
        userId: this.form.userId,             //代理id
        isAllCard: isAllCard,                 //代理直属卡(false)或全部卡(true)  userid不为空时传true
      }

      const returnData = await cardPageByRule({
          batchOpratorRecord,
          page: {
            current: this.page.toString(),
            size: this.pageSize.toString()
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        });

      if (returnData._result) {
        this.list = [];
        this.total = 0;
        if (returnData.data.records) {
          this.list = returnData.data.records;
          this.total = returnData.data.total;
        }
      }
      this.tableLoading = false;

    },
    changPage(val) {
      this.page = val;
      this.innitData();
    },
    changSize(val){
      this.pageSize = val;
      this.innitData();
    },
    saveCardsNo(){
      if(this.form.cardsNo&&this.propType=='cardNo'){
        let arr = this.form.cardsNo.split('\n');
        this.form.cardsNo = '';
        arr.filter(s=>{
          if(s&&s.trim())this.form.cardsNo += s.trim() + '\n';
        });
        this.form.cardsNo.substring(0,this.form.cardsNo.length-2)
      }
      if(this.form.cardsIccid&&this.propType=='iccid'){
        let arr = this.form.cardsIccid.split('\n');
        this.form.cardsIccid = '';
        arr.filter(s=>{
          if(s&&s.trim())this.form.cardsIccid += s.trim() + '\n';
        });
        this.form.cardsIccid.substring(0,this.form.cardsIccid.length-2)
      }
      console.log(this.form.cardsIccid)
      this.dialogFormVisible = false;
    },
    async innitAccountData() {
      //通道下拉
      const returnData2 = await initAccountSelect({});
      this.passageOptions = [
        {value: '', label: '请选择通道'}
      ];
      if (returnData2._result) {
        for (let item of returnData2.data) {
          let obj = {};
          obj.value = item.id;
          obj.label = item.accountName;
          this.passageOptions.push(obj)
        }
        this.form.passage = '';
      }
    },
    async innitBalanceData() {
      //余额套餐下拉
      const returnData3 = await getbalanceHeadSelect({});
      this.balancePackageOptions = [
        {value: '', label: '请选择余额套餐'}
      ];
      if (returnData3._result) {
        for (let item of returnData3.data) {
          let obj = {};
          obj.value = item.id;
          obj.label = item.headName;
          this.balancePackageOptions.push(obj);
        }
        this.form.balancePackage = '';
      }
    },
    async innitMealData() {
      //套餐大类下拉
      const returnData1 = await initSetMealHeadSelect({});
      this.mealTypeOptions = [
        {value: '', label: '请选择套餐大类'}
      ];
      if (returnData1._result) {
        for (let item of returnData1.data) {
          const obj = {};
          obj.value = item.id;
          obj.label = item.name;
          this.mealTypeOptions.push(obj)
        }
        this.form.mealType = '';
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.endNo = null;
      this.form.balanceMax = null;
      this.form.userId = '';
      this.fileName = '';
      this.iccidFileName = '';
      this.cardIccidList = '';
      this.cardNoList = '';
      this.formDisabled = false;
      document.getElementById('fileCardNo').value = '';
      document.getElementById('fileIccid').value='';
      this.list = [];
      this.total = 0;
      this.pageSize = 10;
      this.page = 1;
    },
    async querySearch(queryString, cb) {
      let returnData = await selectAgentList({
        loginName: this.form.loginName
      });
      if (returnData._result) {
        this.loginNames = [];
        for (let item of returnData.data) {
          this.loginNames.push({'value': item.loginName,'userId':item.id})
        }
      }
      cb(this.loginNames);
    },
    handleSelect(item) {
      this.form.userId = item.userId;
      this.form.loginName = item.value;
    },
    //切换选项卡
    handleTabsClick(tab){
      this.activeTab = tab.name;
    },
    changeDisabledTime(val){
      this.formMeal.disabledTime = val;
    },
    changeCleanRule(val){
      this.formMeal.dictOprationType = val;
      if(val=='CLEAN_TRY_CARD'){//仅清空试用包订单及流量
        this.tipTitle = '※ 高风险操作 【批量清空试用包订订单数据及流量】请核对数据 ※'
      }
      else if(val=='CLEAN_ALL_CARD'){//清空全部订单及流量
        this.tipTitle = '※ 高风险操作 【批量清空全部订单数据及流量】请核对数据 ※'
      }
    },

  }
}
</script>

<style scoped>
.btn_input{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  width: 200px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid #DCDFE6;
  color: #67c23a;
  border-radius: 5px;
  background: #fff;
  transition: .1s;
  font-weight: 400;
  outline: none;
}
.btn_input:hover{
  border: 1px solid #67c23a;
  color: #67c23a;
}
.btn_input:active{
  border: 1px solid #67c23a;
  color: #67c23a;
}
.btn_look{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  width: 200px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid #DCDFE6;
  color: #1890ff;
  border-radius: 5px;
  background: #fff;
  transition: .1s;
  font-weight: 400;
  outline: none;
}
.btn_look:hover{
  border: 1px solid #1890ff;
  color: #1890ff;
}
.btn_look:active{
  border: 1px solid #1890ff;
  color: #1890ff;
}
.showBlock{
  width: 300px;
  height: 150px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.leftBlock{
  width: 30px;
  height: 148px;
  background: #e6e6e6;
  color: #333;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  padding: 5px 10px;
  line-height: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.middleBlock{
  width: 100px;
  height: 138px;
  margin: 5px;
  display: inline-flex;
  align-items: center;
}
.rightBlock{
  width: 160px;
  height: 148px;
  padding: 0;
  margin: 0;
}
.saImg{
  width: 100px;
  height: 100px;
  border: 1px solid #666;
}
.row_span1{
  width: 200px;
  height: 20px;
  line-height: 20px;
  color: #333;
  font-size: 14px;
  transform: scale(0.8);
  margin-left: -20px;
  margin-top: 17px;
  font-weight: 500;
}

.row_span2{
  width: 200px;
  height: 20px;
  line-height: 20px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
  transform: scale(0.8);
  margin-left: -20px;
  margin-top: -4px;
}
.row_span3{
  width: 200px;
  height: auto;
  font-size: 14px;
  transform: scale(0.8);
  margin-left: -20px;
  margin-top: 0;
  line-height: 19px;
  font-weight: 500;
}
.row_search{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #8c939d;
  font-weight: bold;
  font-size: 14px;
}
.row_table{
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow-y: scroll;
}
.row_exl{
  padding: 20px 0;
  width: 100%;
  height: 80px;
}
.uploadClass {
  width: 150px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: 10%;
  opacity: 0;
  z-index: 10;
}
</style>
